Ext.QuickTips.init();
Ext.onReady(function() {
    var Category = Ext.data.Record.create([ 'id', 'name' ]);
    var store = new Ext.data.Store({
        url : 'find-category.action',
        reader : new Ext.data.JsonReader({
            idProperty : 'id'
        }, Category),
        autoLoad : true
    });
    var grid = new Ext.grid.GridPanel({
        renderTo : Ext.getBody(),
        frame : true,
        title : 'Category Management',
        width : 300,
        autoHeight : true,
        stripeRows : true,
        viewConfig : {
            forceFit : true
        },
        store : store,
        colModel : new Ext.grid.ColumnModel({
            columns : [ {
                header : 'ID',
                dataIndex : 'id',
                width : 80
            }, {
                header : 'Name',
                dataIndex : 'name',
                width : 220
            } ]
        }),
        tbar : [ {
            text : 'New',
            iconCls : 'new-category',
            handler : function() {
                Ext.Msg.prompt('New Category', 'Category name:', function(btn, text) {
                    if (btn === 'ok' && text.trim() !== '') {
                        Ext.Ajax.request({
                            url : 'new-category.action',
                            params : {
                                'name' : text
                            },
                            method : 'POST',
                            success : function(response) {
                                store.reload();
                            },
                            failure : function() {
                                Ext.Msg.alert("Error", "Failed to new category");
                            }
                        });
                    }
                });
            }
        }, {
            text : 'Edit',
            iconCls : 'edit-category',
            handler : function() {
                var sm = grid.getSelectionModel();
                if (sm.hasSelection()) {
                    var record = sm.getSelected();
                    var id = record.get('id');
                    var name = record.get('name');

                    Ext.Msg.prompt('New Category', 'Category name:', function(btn, text) {
                        if (btn === 'ok' && text.trim() !== '') {
                            Ext.Ajax.request({
                                url : 'update-category.action',
                                params : {
                                    'id' : id,
                                    'name' : text
                                },
                                method : 'POST',
                                success : function(response) {
                                    store.reload();
                                },
                                failure : function() {
                                    Ext.Msg.alert("Error", "Failed to update category");
                                }
                            });
                        }
                    }, this, false, name);
                }
            }
        }, {
            text : 'Delete',
            iconCls : 'delete-category',
            handler : function() {
                var sm = grid.getSelectionModel();
                if (sm.hasSelection()) {
                    var record = sm.getSelected();
                    var id = record.get('id');
                    Ext.Ajax.request({
                        url : 'delete-category.action',
                        params : {
                            'id' : id
                        },
                        method : 'POST',
                        success : function(response) {
                            store.reload();
                        },
                        failure : function() {
                            Ext.Msg.alert("Error", "Failed to delete category");
                        }
                    });
                }
            }
        }, {
            text : 'Refresh',
            iconCls : 'refresh-category',
            handler : function() {
                store.reload();
            }
        } ]
    });
});
